<template>
  <div class="group-members">
    <div class="group-title">群成员({{memberNum}})</div>

    <ul class="members">
      <li v-for="(item, index) in memberList" :key="index">
        <span class="name">{{item.name}} <span v-if="item.role">({{item.role}})</span></span>
        <span class="phone">{{item.phone}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'group-members',
  props: {
    memberNum: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      memberList: [],
    };
  },
  mounted() {
    this.memberList = [
      {
        id: 1,
        name: '张中心',
        phone: '13212348965',
        role: '群主',
      },
      {
        id: 2,
        name: '李一桐',
        phone: '13212348965',
        role: '',
      },
      {
        id: 3,
        name: '张车队',
        phone: '13212348965',
        role: '',
      },
      {
        id: 4,
        name: '李仓库',
        phone: '13212348965',
        role: '',
      },
    ];
  },
};
</script>

<style lang="scss" scoped>
.group-members {
  width: 100%;
  height: 100%;
  border: 1px solid #225689;
  border-radius: 4px;
  background: rgba(53, 157, 255, 0.1);
  color: #fff;
  padding: 16px;

  .group-title {
    font-weight: bold;
    line-height: 56px;
  }

  .members {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 24px;

    > li {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
